<script setup lang="ts">
import type { Page } from '@/types'
import { getFormatDictMap } from '@/util/dict'
import { onMounted, ref } from 'vue'
import { Search, Refresh } from '@/util/icons'
import Pagination from '@/components/Pagination.vue'
import type { HandleTable } from '@/types/handle'
import { getAllHandle } from '@/api/handle'
import { getType } from './methodType'
import { updateRoleHandle, getRoleHandle } from './api'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  editId: number
}>()
// 注册关闭事件
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()
// 分页数据
const page = ref<Page<HandleTable>>({
  num: 1,
  size: 10,
  rows: [],
  count: 0
})
// 角色拥有的权限
const baseData = ref<number[]>([])

/* 获取对应的字典信息 */
const tableDict = ref<Map<string, string>>()

// 页面加载
const loading = ref<boolean>(false)
// 获取页面数据
function getPageData() {
  loading.value = true
  getAllHandle(page.value, searchForm.value)
    .then((tabs) => {
      page.value = tabs.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
}
// 获取角色接口权限
function getData() {
  loading.value = true
  getRoleHandle(props.editId)
    .then((d) => {
      baseData.value = d.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 200)
    })
    .catch(() => {
      ElMessage.error('数据获取出错了')
    })
}
function reAllData() {
  getData()
  getPageData()
}
onMounted(() => {
  getFormatDictMap('handle_manage', 'head').then((d) => {
    tableDict.value = d
  })
  reAllData()
})

/* 搜索 */
/* 是否展示搜索栏 */
const showSearchBar = ref<boolean>(false)
const searchForm = ref<HandleTable>({
  name: '',
  key: '',
  path: '',
  method: '',
  status: ''
})

// 重置搜索框
function reSearch() {
  searchForm.value = {
    name: '',
    key: '',
    path: '',
    method: '',
    status: ''
  }
  getPageData()
}

// 更改权限
function changeAuth(hid: number) {
  const index = baseData.value.indexOf(hid)
  if (index >= 0) {
    baseData.value.splice(index, 1)
  } else {
    baseData.value.push(hid)
  }
}
//保存修改
function save() {
  updateRoleHandle(props.editId, baseData.value)
    .then((d) => {
      ElMessage.success(d.msg)
      emit('cDlg')
    })
    .catch((d) => {
      ElMessage.error(d.msg)
    })
}
function cancel() {
  emit('cDlg')
}
</script>

<template>
  <div class="view">
    <div class="control">
      <div class="search" v-show="showSearchBar">
        <el-form :inline="true">
          <el-form-item :label="tableDict?.get('name') || 'name'">
            <el-input
              v-model="searchForm.name"
              :placeholder="'请输入' + tableDict?.get('name') || 'name'"
            ></el-input>
          </el-form-item>
          <el-form-item :label="tableDict?.get('path') || 'path'">
            <el-input
              v-model="searchForm.path"
              :placeholder="'请输入' + tableDict?.get('path') || 'path'"
            ></el-input>
          </el-form-item>
          <el-form-item :label="tableDict?.get('key') || 'key'">
            <el-select
              v-model="searchForm.key"
              :placeholder="'请选择' + tableDict?.get('key') || 'key'"
              ><el-option label="无" value="" />
              <el-option label="sys" value="sys" />
              <el-option label="user" value="user" />
              <el-option label="public" value="public" />
            </el-select>
          </el-form-item>
          <el-form-item :label="tableDict?.get('method') || 'method'">
            <el-select
              v-model="searchForm.method"
              :placeholder="'请选择' + tableDict?.get('method') || 'method'"
            >
              <el-option label="无" value="" />
              <el-option label="GET" value="GET" />
              <el-option label="POST" value="POST" />
              <el-option label="DELETE" value="DELETE" />
              <el-option label="PUT" value="PUT" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="getPageData">搜索</el-button>
            <el-button :icon="Refresh" @click="reSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="ctl-bts">
        <span class="ctl-l"> </span>
        <span class="ctl-r">
          <el-button :icon="Search" circle @click="showSearchBar = !showSearchBar"></el-button>
          <el-button :icon="Refresh" @click="reAllData" circle></el-button>
        </span>
      </div>
    </div>
    <div class="ctx">
      <el-table
        v-loading="loading"
        table-layout="auto"
        :stripe="true"
        :data="page.rows"
        height="300"
        :flexible="true"
      >
        <el-table-column prop="name" align="center">
          <template #header>
            {{ tableDict?.get('name') || 'name' }}
          </template>
        </el-table-column>
        <el-table-column prop="key" align="center">
          <template #header>
            {{ tableDict?.get('key') || 'key' }}
          </template>
          <template #default="{ row }">
            <span class="highlight-info">{{ row['key'] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" align="center">
          <template #header>
            {{ tableDict?.get('path') || 'path' }}
          </template>
          <template #default="{ row }">
            <span class="highlight-info">{{ row['path'] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template #header>
            {{ tableDict?.get('auth') || 'auth' }}
          </template>
          <template #default="{ row }">
            <el-switch :modelValue="baseData.includes(row.hId)" @change="changeAuth(row.hId)" />
          </template>
        </el-table-column>

        <el-table-column prop="method" align="center">
          <template #header>
            {{ tableDict?.get('method') || 'method' }}
          </template>
          <template #="{ row }">
            <el-tag :type="getType(row['method'])">
              {{ row['method'] }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :page="page" :get-page-data="getPageData" />
    </div>
    <div class="buttons">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<style scoped lang="less">
@import '../../../assets/page_bgl.less';
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
